.charlist {
	display: grid;

	grid-template-columns: [startcol] 2fr [species] 2fr [serial] 1fr [description] 4fr [endcols];
	grid-template-rows: auto;

	column-gap: 0;
	row-gap: 0.4em;
	margin: 1em;
	
	} 

.charlist div {
	padding: 0.5em;
	}
	

.char_header {
	font-weight: bold;
	border-width: 0 0 1px 0;
	border-style: solid;
	background-color: var(--backgroundhead1);
	border-color: var(--textcolour);
}

.char_name { 
	grid-column-start: startcol;
	grid-column-end: species;
	background-color: var(--backgroundhead1);
	border-radius: 0.8em;
	}
.char_species {
	grid-column-start: species;
	grid-column-end: serial;
}
.char_serial {
	grid-column-start: serial;
	grid-column-end: description;
}
.char_spaninfo { 
	grid-column-start: serial; 
	grid-column-end: endcols; 
	} /* for grids that don't use the serial*/
.char_info { 
	grid-column-start: description; 
	grid-column-end: endcols; 
	}
	
.char_species, .char_serial, .char_spaninfo, .char_info {
	border-width: 0 0 1px 0;
	border-style: dotted;
	border-color: var(--textcolour);
}